<template>
  <div class="title">
    <div>我是一只螃蟹 ，我的钳子没了 ，我没钳了。</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.title {
  font-size: 32px;
  color: aquamarine;
  cursor: pointer;
  width: fit-content;
  margin: 0 auto;
}
.title div {
  background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
  background-size: 0 2px;
  transition: background-size 1500ms;
}
.title div:hover {
  background-position-x: left;
  background-size: 100% 6px;
}
</style>